<!-- 工具(百度)) -->
<template>
  <div class="tools-bdmap">
    <div class="btn-group-tools">
        <!-- 平台管理 -->
        <el-tooltip v-if="bsConfig.PlatManage.show" class="item" effect="dark" content="平台管理">
            <el-button type="primary" icon="iconfont fontSize30 iconfuwuqi-fill" circle @click="$Ctl.enterDetail('PlatformManage')"></el-button>
        </el-tooltip>
        <!-- 切换到三维地图 -->
        <el-tooltip v-show="showSwitchMapBtn" class="item" effect="dark" content="切换到三维地图">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qiehuandaosanweiditu" circle @click="$Ctl.switchMapType(threeDMapType)"></el-button>
        </el-tooltip>
        <!-- 查找周边 -->
        <el-tooltip class="item" effect="dark" content="查找周边">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_chazhaozhoubian" circle @click="$Ctl.lookAround()"></el-button>
        </el-tooltip>
        <!-- 清除 -->
        <el-tooltip class="item" effect="dark" content="清除标记">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qingchucehuishuju" circle @click="$Ctl.clearMapMark()"></el-button>
        </el-tooltip>
    </div>
    <hr/>
    <div class="btn-group-tools">
        <!-- 导航 -->
        <el-tooltip class="item" effect="dark" content="导航">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_daohang" :class="showNavigation?'selected':''" circle @click="navigation"></el-button>
        </el-tooltip>
        <!-- 路况 -->
        <el-tooltip class="item" effect="dark" content="路况">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_lukuang" circle @click="$Ctl.tranficStatus()"></el-button>
        </el-tooltip>
        <!-- 街景 -->
        <el-tooltip class="item" effect="dark" content="街景">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_jiejing" circle @click="$Ctl.openPanoramaWind()"></el-button>
        </el-tooltip>
        <!-- 切换主题 -->
        <el-tooltip class="item" effect="dark" content="切换主题">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qiehuanzhuti" circle @click="$Ctl.changeThemeMap()"></el-button>
        </el-tooltip>
    </div>
    <div class="btn-group-tools" v-show="showNavigation">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="最少时间" name="BMAP_DRIVING_POLICY_AVOID_CONGESTION"></el-tab-pane>
            <el-tab-pane label="优先高速" name="BMAP_DRIVING_POLICY_FIRST_HIGHWAYS"></el-tab-pane>
            <el-tab-pane label="避开高速" name="BMAP_DRIVING_POLICY_AVOID_HIGHWAYS"></el-tab-pane>
        </el-tabs>
        <el-input
            id="nav_start"
            placeholder="我的位置"
            class="search-input"
            clearable
            prefix-icon="el-icon-location-outline"
            v-model="input1">
        </el-input>
        <el-input
            id="nav_end"
            placeholder="输入终点"
            class="search-input"
            clearable
            prefix-icon="el-icon-location-outline"
            v-model="input2">
        </el-input>
        <el-button size="medium" type="primary" style="float: right; margin: 20px;" @click="beginDrive(activeName)">开始导航</el-button>
    </div>
  </div>
</template>
<script>

export default {
    props: {
        parames: {
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            showSwitchMapBtn:false,
            threeDMapType: 2,
            showNavigation:false,
            activeName: '0',
            input1:'',
            input2:''
        }
    },
    created () {
        let that = this
        if(that.bsConfig.MapOptions.fMapAttr.show){
            that.showSwitchMapBtn = true
            that.threeDMapType = 2
        }
        if(that.bsConfig.MapOptions.threeDmapAttr.show){
            that.showSwitchMapBtn = true
            that.threeDMapType = 3
        }
        if(that.bsConfig.MapOptions.uMapAttr&&that.bsConfig.MapOptions.uMapAttr.show&&this.$store.state.userInfo.isMuilUnitUser){
            that.showSwitchMapBtn = true
            that.threeDMapType = 4
        }
    },
    methods: {
        //TODO 以下函数都没有考虑跨窗体
        /* @初始化百度地图导航输入框，模糊搜索 */
        /*  * @param { Int inputId }
            * @param { String 初始值 }
        */
        navigation(){
           let that = this
           that.showNavigation = !that.showNavigation
           window.FunList.int_LocalSearch('nav_start','我的位置')
           window.FunList.int_LocalSearch('nav_end','')
        },
        beginDrive (type) {// 最少时间 、最短距离、避开高速：0，1，2
            window.FunList.beginDrive_BaiduMap(type)
        }
    }
}
</script>

<style lang="scss" scoped>
.tools-bdmap{
    padding: 10px;
    button{
        &.is-circle{
            color: #89E2FF;
            width:58px;
            height:58px;
            margin: 11px;
            background:rgba(51,114,212,0.3);
            border:2px solid rgba(51,114,212,1);
            border-radius:8px;
        }
        &.selected{
            color: #90F1FF;
            background: rgba(144,241,255,0.3);
            border: 2px solid rgba(144,241,255,1)
        }
    }
    .btn-group-tools{
        .el-tabs{
            padding: 20px;  
        }
    }
}
</style>
